// ------- List renderer -------
.o_list_renderer {
    --ListRenderer-table-padding-h: #{$table-cell-padding-x-sm};

    --ListRenderer-thead-padding-v: #{$table-cell-padding-y * 1.25};
    --ListRenderer-thead-bg-color: #{$gray-200};
    --ListRenderer-thead-border-end-color: #{$border-color};

    .o_list_view &  {
        --ListRenderer-table-padding-h: #{$o-horizontal-padding};
    }

    .o_list_table {
        background-color: $o-view-background-color;
        // We need this to be collapse because we want to add a border on the rows
        // for sale order/invoice lines of type section.
        border-collapse: collapse;
        font-variant-numeric: tabular-nums;

        > thead, > tbody, > tfoot {
            > tr > :first-child {
                padding-left: var(--ListRenderer-table-padding-h);
            }

            > tr > :last-child {
                padding-right: var(--ListRenderer-table-padding-h);
            }

            > tr > :empty {
                padding: 0;
            }
        }

        :not(.o_field_x2many_list) > & thead, tfoot {
            tr > :not(:empty) {
                padding-top: var(--ListRenderer-thead-padding-v);
                padding-bottom: var(--ListRenderer-thead-padding-v);
            }
        }

        thead {
            background-color: var(--ListRenderer-thead-bg-color);
            color: $headings-color;

            th:not(.o_list_record_selector) {
                border-left: $border-width solid var(--ListRenderer-thead-border-end-color);
            }

            .o_list_number_th {
                /*rtl:ignore*/
                text-align: right;
            }
        }

        // Override BS default
        > :not(:first-child) {
            border-top-width: 0;
        }

        tbody > tr > td:not(.o_list_record_selector) {
            &:not(.o_handle_cell):not(.o_list_button):not(.o_list_record_remove) {
                @include o-text-overflow(table-cell);
                &.o_list_text {
                    white-space: pre-wrap;
                }
            }

            &.o_list_number {
                /*rtl:ignore*/
                text-align: right;
                /*rtl:ignore*/
                direction : ltr;
            }
            &.o_list_text {
                word-break: break-word;
                .o_field_widget textarea.o_input {
                    vertical-align: top;
                }
            }
            &.o_list_char.o_color_cell .o_field_color {
                width: 17px;
                height: 17px;
            }
            &.o_color_picker_cell .o_field_color_picker .o_colorlist {
                justify-content: flex-end;
            }
            &.o_list_button {
                white-space: nowrap;
                > button {
                    padding: 0 5px;
                    &:not(:last-child) {
                        margin-right: 3px;
                    }
                }
            }

            // ------- Decrease table's inner content "visual depth" -------
            &:first-of-type > tr:first-child:not(.o_group_header) {
                box-shadow: inset 0px 5px 10px -4px rgba(black, 0.15);
            }
        }
        &.o_list_computing_widths {
            > tbody > tr > td {
                &.o_list_text, // text field, className on the td
                > .o_field_text {
                    // text field with widget, className inside the td
                    white-space: pre !important;
                }
            }
        }

        tfoot {
            // cursor: default;
            color: $o-list-footer-color;
            background-color: $o-list-footer-bg-color;
            font-weight: $o-list-footer-font-weight;
            border-top: 1px solid $table-border-color;
            border-bottom: 1px solid $table-border-color;


            > tr > td {
                @include o-text-overflow(table-cell);
            }

            .o_list_number {
                /*rtl:ignore*/
                text-align: right;
                /*rtl:ignore*/
                direction : ltr;
            }
        }

        .o_column_sortable:not(.o_handle_cell) {
            user-select: none;  // Prevent unwanted selection while sorting
        }

        .o_list_record_selector {
            width: 40px;
        }

        .o_list_record_remove, .o_handle_cell {
            width: 1px;  // to prevent the column to expand
        }


        .o_list_table_ungrouped {
            .o_list_controller {
                max-width: 35px !important;
            }
        }

        .o_list_record_remove button {
            padding: 0px;
            background: none;
            border-style: none;
            display: table-cell;
            cursor: pointer;
        }

        .o_keyboard_navigation {
            th:focus-within, td:focus-within {
                --table-accent-bg: none;
                background-color: $o-form-lightsecondary;
                outline: none;
            }
        }

        // It's important that this appears after the keyboard navigation.
        // Otherwise, o_keyboard_navigation will override the background color
        // of the focused cell.
        .o_selected_row {
            th:focus-within, td:focus-within {
                --table-accent-bg: none;
                background-color: $o-view-background-color;
            }
        }

        // Grouped list views
        tbody > tr.o_group_header {
            > th,
            > td {
                vertical-align: middle;
                padding-top: 5px;
                padding-bottom: 5px;
            }
            .o_group_name {
                @include o-text-overflow(table-cell);
            }
            .o_group_buttons {
                display: inline-block;
                margin-left: 10px;

                > button {
                    @include o-hover-text-color($o-brand-primary, darken($o-brand-primary, 20%));
                    background-color: transparent;
                    border: none;
                    padding-top: 0;
                    padding-bottom: 0;
                }
            }
            .o_pager {
                cursor: text;
                user-select: none;
                text-align: right;
                padding-top: 0 !important;
                padding-bottom: 0 !important;
                margin-top: -2px;
                margin-bottom: -2px;

                .o_pager_previous,
                .o_pager_next {
                    max-height: 30px;
                    padding: 0 5px;
                    background-color: lighten($o-brand-lightsecondary, 10%);
                    &:hover {
                        background-color: $o-brand-lightsecondary;
                    }
                }
            }
            .o_group_caret {
                margin-inline-start: calc(var(--o-list-group-level, 0) * #{map-get($spacers, 4)});
            }
        }
        tbody + tbody {
            border-top: none; // Override bootstrap for grouped list views
        }


        .o_data_cell.o_text_overflow,
        .o_data_cell.o_invisible_modifier {
            // Override display: none to keep table cells aligned. Note: cannot use
            // 'initial' as it will force them to 'inline', not 'table-cell'.
            display: table-cell !important;
        }

        &.o_resizing tr > :not(.o_column_resizing) {
            opacity: 0.5;
        }

        &.o_empty_list {
            table-layout: fixed;
        }

        th {
            position: relative;
        }

        span.o_resize {
            cursor: col-resize;
        }

        .o_list_actions_header {
            width: 32px;
        }

        .o_data_row.o_list_no_open {
            cursor: default;
        }

        .o_data_row:not(.o_selected_row) .o_data_cell {
            // Boolean fields in non-selected rows completely disabled.
            .form-check {
                pointer-events: none;
            }

            // These widgets enable the checkbox if there is no readonly modifier.
            &.o_boolean_button_cell,
            &.o_boolean_favorite_cell,
            &.o_boolean_toggle_cell,
            &.o_toggle_button_cell {
                > .o_field_widget:not(.o_readonly_modifier) .form-check {
                    pointer-events: auto;
                }
            }
            &.o_many2many_avatar_user_cell {
                .o_field_many2manytags {
                    > span {
                        margin-right: 2px;
                    }
                }
            }
        }

        .o_data_row:not(.o_selected_row) {
            .o_list_many2one,
            .o_list_char,
            .o_list_activity_cell,
            .o_list_number {
                white-space: nowrap;
                .o_field_widget:not(.o_row_handle):not(.o_field_handle):not(.o_field_badge) {
                    display: inline;
                    span:not(.o_m2o_avatar) {
                        @include o-text-overflow(inline);
                    }
                }
            }
        }

        .o_data_row.o_selected_row > .o_data_cell {

            > .o_field_widget:not(.o_readonly_modifier):not(.o_invisible_modifier) {
                width: 100%;
                .o_input {
                    border: none;
                    padding: 0;
                    margin: 0;
                    width: 100%;
                }
                &.o_field_text {
                    vertical-align: top;
                }
                .o_field_many2one_selection {
                    .o_external_button {
                        padding: 0;
                        border: none;
                        background-color: inherit;
                        margin-left: 5px;
                        font-size: 12px;
                    }
                }
                &.o_field_monetary input {
                    width: 0; // override width: 100px and let flex makes this input grow
                    margin: 0 4px;
                }
                &.o_field_many2manytags > .o_field_many2one {
                    // reduce basis to prevent many2one input from going to the next line to often
                    flex-basis: 40px;
                }
                .o_field_many2one_avatar {
                    display: flex;
                }
                &.o_field_badge {
                    width: auto; // override width: 100% to keep the optimal badge width
                }
                .o_input_dropdown,
                .o_datepicker {
                    > .o_input {
                        padding-right: 15px; // to prevent caret overlapping
                    }
                    > .o_dropdown_button,
                    .o_datepicker_button {
                        margin-right: 5px;
                        @include o-position-absolute(0, 0);
                    }
                }
                > input.o_field_translate,
                textarea.o_field_translate {
                    padding-right: 25px;
                    + span.o_field_translate {
                        margin-left: -35px;
                        padding: 0px 1px;
                        text-align: right;
                        width: 35px;
                        vertical-align: top;
                        font-size: 12px;
                    }
                }
                > .o_row_handle {
                    visibility: hidden; // hide sequence when editing
                }
            }
        }

        .o_field_x2many_list_row_add,
        .o_group_field_row_add {
            a:focus,
            a:active,
            button:focus,
            button:active {
                color: $link-hover-color;
                outline: none;
            }

            button {
                font-weight: 400;
                padding: 0;
                vertical-align: baseline;
            }
        }
    }

    .o_data_row.o_selected_row > .o_data_cell.o_required_modifier:not(.o_readonly_modifier) {
        border-bottom: 1px solid $o-input-border-required;
    }

    .o_data_row.o_selected_row > .o_data_cell.o_invalid_cell:not(.o_readonly_modifier) {
        border-bottom: 1px solid $danger;
    }

    /**
    Because of border-collapse, border top and border bottom are 'merged'.

    * cell border overlaps row border
    * when there is a border collapse the first cell (e.g. A1) take over the following cell (e.g. B1 or A2)
    ┌──┬──┐
    │A1│B1│
    ├──┼──┤
    │A2│B2│
    └──┴──┘

    So we apply some rules to have the style wanted:
    */
    // 1. we set the global separator (gray line) of the table on the row (bottom) and not on the cell (bottom)
    .o_data_row {
        border-bottom-width: 1px;

        &:not(.o_selected_row):not(.o_data_row_selected):focus-within > * {
            $-focus-bg: mix($table-color, $table-bg, percentage($table-hover-bg-factor + 0.1));

            --#{$variable-prefix}table-accent-bg: #{$-focus-bg};
        }
    }

    // 2. we remove the bottom border (added by BS5) on all cells (this force to show the top border of selected cell)
    .o_data_row > .o_data_cell {
        border-bottom-width: 0;
    }
    // 3. we add only a bottom border to selected cells (this force to show the bottom border of the selected cell)
    .o_data_row.o_data_row_selected > .o_data_cell {
        border-bottom-width: 1px;
    }

    .o_data_row.o_dragged {
        display: flex;

        > td {
            flex-grow: 0;
            flex-shrink: 0;
        }
    }
}

@include media-breakpoint-down(md) {
    .o_data_row_selected {
        user-select: none; // Prevent text selection when editing
    }

    .o_web_client.o_touch_device .o_content table.o_list_table.table tr > {
        .o_list_record_selector:first-child {
            display: none;

            // first-child will be hidden so add left padding to second child
            & + * {
                padding-left: var(--ListRenderer-table-padding-h);
            }
        }
    }
}

// ------- Sample mode -------
.o_list_view .o_view_sample_data {
    .o_list_table {
        cursor: default !important;
    }

    .o_data_row,
    .o_list_footer,
    .o_group_header,
    thead .o_list_record_selector {
        @include o-sample-data-disabled;
    }
}
